<template>
  <view class="task-detail-page">
    <!-- 导航栏 -->
    <u-navbar title="任务详情" back-icon="arrow-left" />
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <u-loading-icon mode="circle" size="28" color="#409EFF"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 任务详情内容 -->
    <view v-else-if="taskInfo" class="task-content">
      <!-- 任务基本信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="task-title">{{ taskInfo.taskName }}</text>
          <u-tag 
            :text="getTaskTypeText(taskInfo.taskType)" 
            :type="getTaskTypeTagType(taskInfo.taskType)"
            size="small"
          />
        </view>
        
        <view class="card-content">
          <view class="info-item">
            <u-icon name="location" size="16" color="#666"></u-icon>
            <text class="info-label">区域：</text>
            <text class="info-text">{{ taskInfo.areaName || '未分配区域' }}</text>
          </view>
          
          <view class="info-item">
            <u-icon name="user" size="16" color="#666"></u-icon>
            <text class="info-label">负责人：</text>
            <text class="info-text">{{ taskInfo.assignedUserName || '未分配人员' }}</text>
          </view>
          
          <view class="info-item">
            <u-icon name="clock" size="16" color="#666"></u-icon>
            <text class="info-label">计划时间：</text>
            <text class="info-text">{{ formatDateTime(taskInfo.scheduledDate, taskInfo.scheduledTime) }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.areaType">
            <u-icon name="home" size="16" color="#666"></u-icon>
            <text class="info-label">区域类型：</text>
            <text class="info-text">{{ taskInfo.areaType }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.areaLocation">
            <u-icon name="map" size="16" color="#666"></u-icon>
            <text class="info-label">具体位置：</text>
            <text class="info-text">{{ taskInfo.areaLocation }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.cleaningStandard">
            <u-icon name="list" size="16" color="#666"></u-icon>
            <text class="info-label">保洁标准：</text>
            <text class="info-text">{{ taskInfo.cleaningStandard }}</text>
          </view>
          
          <view class="info-item">
            <u-icon name="flag" size="16" color="#666"></u-icon>
            <text class="info-label">优先级：</text>
            <view class="priority-info">
              <text class="priority-text">{{ getPriorityText(taskInfo.priority) }}</text>
              <view class="priority-bar">
                <view 
                  class="priority-fill"
                  :style="{ 
                    width: getPriorityPercentage(taskInfo.priority) + '%',
                    backgroundColor: getPriorityColor(taskInfo.priority)
                  }"
                ></view>
              </view>
            </view>
          </view>
          
          <view class="info-item">
            <u-icon name="info-circle" size="16" color="#666"></u-icon>
            <text class="info-label">状态：</text>
            <u-tag 
              :text="getStatusText(taskInfo.status)" 
              :type="getStatusType(taskInfo.status)" 
              size="small"
            />
          </view>
          
          <view class="info-item" v-if="taskInfo.description">
            <u-icon name="file-text" size="16" color="#666"></u-icon>
            <text class="info-label">描述：</text>
            <text class="info-text description-text">{{ taskInfo.description }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.areaType">
            <u-icon name="home" size="16" color="#666"></u-icon>
            <text class="info-label">区域类型：</text>
            <text class="info-text">{{ taskInfo.areaType }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.areaLocation">
            <u-icon name="map" size="16" color="#666"></u-icon>
            <text class="info-label">具体位置：</text>
            <text class="info-text">{{ taskInfo.areaLocation }}</text>
          </view>
          
          <view class="info-item" v-if="taskInfo.cleaningStandard">
            <u-icon name="list" size="16" color="#666"></u-icon>
            <text class="info-label">保洁标准：</text>
            <text class="info-text description-text">{{ taskInfo.cleaningStandard }}</text>
          </view>
        </view>
      </view>
      
      <!-- 任务进度信息 -->
      <view class="progress-card" v-if="taskInfo.status >= 2">
        <view class="card-header">
          <u-icon name="clock" size="18" color="#333"></u-icon>
          <text class="card-title">任务进度</text>
        </view>
        
        <view class="progress-content">
          <view class="progress-item" v-if="taskInfo.actualStartTime">
            <text class="progress-label">开始时间：</text>
            <text class="progress-text">{{ formatDateTime(taskInfo.actualStartDate, taskInfo.actualStartTime) }}</text>
          </view>
          
          <view class="progress-item" v-if="taskInfo.actualEndTime">
            <text class="progress-label">完成时间：</text>
            <text class="progress-text">{{ taskInfo.actualEndTime }}</text>
          </view>
          
          <view class="progress-item" v-if="qualityScore !== null && qualityScore !== undefined">
            <u-icon name="star" size="16" color="#666"></u-icon>
            <text class="progress-label">质量评分：</text>
            <text class="progress-text">{{ qualityScore }}分</text>
          </view>
          
          <view class="progress-item" v-if="inspectionStatus">
            <u-icon name="checkmark-circle" size="16" color="#666"></u-icon>
            <text class="progress-label">检查状态：</text>
            <u-tag 
              :text="inspectionStatus" 
              :type="getInspectionStatusType(inspectionStatus)"
              size="small"
            />
          </view>
          
          <view class="progress-item" v-if="inspectionRemark">
            <u-icon name="chat" size="16" color="#666"></u-icon>
            <text class="progress-label">检查备注：</text>
            <text class="progress-text">{{ inspectionRemark }}</text>
          </view>
        </view>
      </view>
      
      <!-- 执行记录详情 -->
      <view class="records-card" v-if="taskRecords && taskRecords.length > 0">
        <view class="card-header">
          <u-icon name="list" size="18" color="#333"></u-icon>
          <text class="card-title">执行记录</text>
        </view>
        
        <view class="records-content">
          <view 
            v-for="(record, index) in taskRecords" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-header">
              <text class="record-title">记录 #{{ index + 1 }}</text>
              <u-tag 
                :text="record.statusDesc" 
                :type="getRecordStatusType(record.status)" 
                size="small"
              />
            </view>
            
            <view class="record-content">
              <view class="record-info">
                <text class="info-label">执行人：</text>
                <text class="info-text">{{ record.realName || record.userName || '未知' }}</text>
              </view>
              <view class="record-info">
                <text class="info-label">完成时间：</text>
                <text class="info-text">{{ formatDateTime(record.completionTime) }}</text>
              </view>
              <view class="record-info" v-if="record.toolsUsed">
                <text class="info-label">使用工具：</text>
                <text class="info-text">{{ record.toolsUsed }}</text>
              </view>
              <view class="record-info" v-if="record.qualityScore">
                <text class="info-label">质量评分：</text>
                <text class="info-text">{{ record.qualityScore }}分</text>
              </view>
              <view class="record-info" v-if="record.inspectorRealName">
                <text class="info-label">检查人：</text>
                <text class="info-text">{{ record.inspectorRealName || record.inspectorName || '未知' }}</text>
              </view>
              <view class="record-info" v-if="record.inspectionRemark">
                <text class="info-label">检查备注：</text>
                <text class="info-text">{{ record.inspectionRemark }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 清洁前照片 -->
      <view class="photos-card" v-if="parsedBeforePhotos && parsedBeforePhotos.length > 0">
        <view class="card-header">
          <u-icon name="camera" size="18" color="#333"></u-icon>
          <text class="card-title">清洁前照片</text>
          <text class="photo-count">({{ parsedBeforePhotos.length }}张)</text>
        </view>
        
        <view class="photos-content">
          <AppImagePreview 
            :images="parsedBeforePhotos"
            :show-image-info="true"
            empty-text="暂无清洁前照片"
            @preview="handleImagePreview"
            @error="handleImageError"
            @load="handleImageLoad"
          />
        </view>
      </view>
      
      <!-- 清洁后照片 -->
      <view class="photos-card" v-if="parsedAfterPhotos && parsedAfterPhotos.length > 0">
        <view class="card-header">
          <u-icon name="camera" size="18" color="#333"></u-icon>
          <text class="card-title">清洁后照片</text>
          <text class="photo-count">({{ parsedAfterPhotos.length }}张)</text>
        </view>
        
        <view class="photos-content">
          <AppImagePreview 
            :images="parsedAfterPhotos"
            :show-image-info="true"
            empty-text="暂无清洁后照片"
            @preview="handleImagePreview"
            @error="handleImageError"
            @load="handleImageLoad"
          />
        </view>
      </view>
      
      <!-- 使用工具 -->
      <view class="tools-card" v-if="toolsUsed && toolsUsed.length > 0">
        <view class="card-header">
          <u-icon name="tools" size="18" color="#333"></u-icon>
          <text class="card-title">使用工具</text>
        </view>
        
        <view class="tools-content">
          <u-tag 
            v-for="(tool, index) in toolsUsed" 
            :key="index"
            :text="tool" 
            type="info" 
            size="small"
            class="tool-tag"
          />
        </view>
      </view>
      
      <!-- 质量评分 -->
      <view class="quality-card" v-if="qualityScore !== null">
        <view class="card-header">
          <u-icon name="star" size="18" color="#333"></u-icon>
          <text class="card-title">质量评分</text>
        </view>
        
        <view class="quality-content">
          <view class="score-display">
            <text class="score-text">{{ qualityScore }}分</text>
            <view class="score-bar">
              <view 
                class="score-fill"
                :style="{ width: (qualityScore / 10 * 100) + '%' }"
              ></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 检查信息 -->
      <view class="inspection-card" v-if="inspectionStatus || inspectionRemark">
        <view class="card-header">
          <u-icon name="checkmark-circle" size="18" color="#333"></u-icon>
          <text class="card-title">检查信息</text>
        </view>
        
        <view class="inspection-content">
          <view class="inspection-item" v-if="inspectionStatus">
            <text class="info-label">检查状态：</text>
            <u-tag 
              :text="inspectionStatus" 
              :type="getInspectionStatusType(inspectionStatus)" 
              size="small"
            />
          </view>
          <view class="inspection-item" v-if="inspectionRemark">
            <text class="info-label">检查备注：</text>
            <text class="info-text">{{ inspectionRemark }}</text>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮区域 -->
      <view class="action-section">
        <u-button 
          v-if="taskInfo.status === 1"
          type="primary" 
          text="分配任务"
          size="large"
          @click="goToTaskAssign"
          class="action-btn"
        />
        <u-button 
          v-else-if="taskInfo.status === 2"
          type="success" 
          text="开始任务"
          size="large"
          @click="goToTaskStart"
          class="action-btn"
        />
        <u-button 
          v-else-if="taskInfo.status === 3"
          type="warning" 
          text="完成任务"
          size="large"
          @click="goToTaskComplete"
          class="action-btn"
        />
        <u-button 
          v-else
          type="info" 
          text="返回列表"
          size="large"
          @click="goBack"
          class="action-btn"
        />
      </view>
    </view>
    
    <!-- 错误状态 -->
    <view v-else class="error-state">
      <u-empty text="任务信息加载失败" icon="error" mode="error" />
      <u-button 
        type="primary" 
        text="重新加载" 
        @click="loadTaskDetail"
        class="retry-btn"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCleaningTaskDetail, getCleaningTaskDetailInfo } from '@/api/cleaning'
import AppImagePreview from '@/components/AppImagePreview.vue'

// 响应式数据
const loading = ref(false)
const taskInfo = ref(null)
const taskPhotos = ref([])
const taskRecords = ref([])
const beforePhotos = ref([])
const afterPhotos = ref([])
const toolsUsed = ref([])
const qualityScore = ref(null)
const inspectionStatus = ref('')
const inspectionRemark = ref('')

// 解析照片数据的计算属性
const parsedBeforePhotos = computed(() => {
  if (!beforePhotos.value || beforePhotos.value.length === 0) {
    return []
  }
  
  const parsed = []
  beforePhotos.value.forEach(photoStr => {
    try {
      if (typeof photoStr === 'string') {
        const photoObj = JSON.parse(photoStr)
        parsed.push(photoObj)
      } else if (typeof photoStr === 'object') {
        parsed.push(photoStr)
      }
    } catch (error) {
      console.warn('解析清洁前照片JSON失败:', photoStr, error)
      // 如果解析失败，尝试作为URL处理
      if (typeof photoStr === 'string' && photoStr.startsWith('http')) {
        parsed.push({
          id: `before_${Date.now()}_${Math.random()}`,
          fileUrl: photoStr,
          fileName: photoStr.split('/').pop() || 'unknown',
          originalFileName: photoStr.split('/').pop() || 'unknown'
        })
      }
    }
  })
  
  return parsed
})

const parsedAfterPhotos = computed(() => {
  if (!afterPhotos.value || afterPhotos.value.length === 0) {
    return []
  }
  
  const parsed = []
  afterPhotos.value.forEach(photoStr => {
    try {
      if (typeof photoStr === 'string') {
        const photoObj = JSON.parse(photoStr)
        parsed.push(photoObj)
      } else if (typeof photoStr === 'object') {
        parsed.push(photoStr)
      }
    } catch (error) {
      console.warn('解析清洁后照片JSON失败:', photoStr, error)
      // 如果解析失败，尝试作为URL处理
      if (typeof photoStr === 'string' && photoStr.startsWith('http')) {
        parsed.push({
          id: `after_${Date.now()}_${Math.random()}`,
          fileUrl: photoStr,
          fileName: photoStr.split('/').pop() || 'unknown',
          originalFileName: photoStr.split('/').pop() || 'unknown'
        })
      }
    }
  })
  
  return parsed
})

// 获取页面参数
const taskId = ref('')

/**
 * 页面加载时获取参数
 */
onLoad((options) => {
  console.log('onLoad获取参数:', options)
  
  if (options && options.id) {
    const id = parseInt(options.id)
    if (!isNaN(id) && id > 0) {
      taskId.value = id
      console.log('onLoad设置任务ID成功:', taskId.value)
      loadTaskDetail()
      return
    }
  }
  
  console.error('未获取到有效的任务ID参数:', options)
  uni.showToast({
    title: '缺少任务ID参数',
    icon: 'none'
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
})

/**
 * 页面加载时初始化
 */
onMounted(() => {
  // onLoad已经处理了参数获取，这里不需要额外处理
  console.log('页面初始化完成，任务ID:', taskId.value)
})

/**
 * 加载任务详情
 */
const loadTaskDetail = async () => {
  if (!taskId.value) {
    console.error('任务ID为空，无法加载任务详情')
    return
  }
  
  console.log('开始加载任务详情，任务ID:', taskId.value)
  loading.value = true
  
  try {
    // 使用新的详细信息API
    const response = await getCleaningTaskDetailInfo(taskId.value)
    console.log('任务详细信息API响应:', response)
    
    if (response && response.success && response.data) {
      taskInfo.value = response.data
      console.log('任务信息加载成功:', taskInfo.value)
      
      // 处理执行记录
      if (response.data.records && Array.isArray(response.data.records)) {
        taskRecords.value = response.data.records
        console.log('任务记录加载成功:', taskRecords.value)
      }
      
      // 处理照片数据
      if (response.data.beforePhotos && Array.isArray(response.data.beforePhotos)) {
        beforePhotos.value = response.data.beforePhotos
        console.log('清洁前照片加载成功:', beforePhotos.value)
      }
      
      if (response.data.afterPhotos && Array.isArray(response.data.afterPhotos)) {
        afterPhotos.value = response.data.afterPhotos
        console.log('清洁后照片加载成功:', afterPhotos.value)
      }
      
      // 处理工具信息
      if (response.data.toolsUsed && Array.isArray(response.data.toolsUsed)) {
        toolsUsed.value = response.data.toolsUsed
        console.log('使用工具加载成功:', toolsUsed.value)
      }
      
      // 处理质量评分
      if (response.data.qualityScore !== null && response.data.qualityScore !== undefined) {
        qualityScore.value = response.data.qualityScore
        console.log('质量评分加载成功:', qualityScore.value)
      }
      
      // 处理检查信息
      if (response.data.inspectionStatus) {
        inspectionStatus.value = response.data.inspectionStatus
        console.log('检查状态加载成功:', inspectionStatus.value)
      }
      
      if (response.data.inspectionRemark) {
        inspectionRemark.value = response.data.inspectionRemark
        console.log('检查备注加载成功:', inspectionRemark.value)
      }
      
      // 合并所有照片用于展示
      taskPhotos.value = [...beforePhotos.value, ...afterPhotos.value]
    } else {
      console.error('API响应失败:', response)
      uni.showToast({
        title: response?.message || '任务信息不存在',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载任务详情失败:', error)
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

/**
 * 获取任务类型文本
 */
const getTaskTypeText = (type) => {
  const typeMap = {
    'routine': '常规',
    'temporary': '临时',
    'special': '特殊'
  }
  return typeMap[type] || '未知类型'
}

/**
 * 获取任务类型标签类型
 */
const getTaskTypeTagType = (type) => {
  const typeMap = {
    'routine': 'info',
    'temporary': 'warning',
    'special': 'error'
  }
  return typeMap[type] || 'info'
}

/**
 * 获取状态文本
 */
const getStatusText = (status) => {
  const statusMap = {
    1: '待分配',
    2: '已分配',
    3: '进行中',
    4: '已完成',
    5: '已取消'
  }
  return statusMap[status] || '未知状态'
}

/**
 * 获取状态类型
 */
const getStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'info',
    3: 'primary',
    4: 'success',
    5: 'error'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取优先级文本
 */
const getPriorityText = (priority) => {
  const priorityMap = {
    1: '低',
    2: '中',
    3: '高',
    4: '紧急'
  }
  return priorityMap[priority] || '未知'
}

/**
 * 获取优先级百分比
 */
const getPriorityPercentage = (priority) => {
  const percentageMap = {
    1: 25,
    2: 50,
    3: 75,
    4: 100
  }
  return percentageMap[priority] || 0
}

/**
 * 获取优先级颜色
 */
const getPriorityColor = (priority) => {
  const colorMap = {
    1: '#2ed573',
    2: '#ffa502',
    3: '#ff4757',
    4: '#ff3838'
  }
  return colorMap[priority] || '#747d8c'
}

/**
 * 格式化日期时间
 */
const formatDateTime = (date, time) => {
  if (!date) return ''
  const dateStr = date.toString()
  const timeStr = time ? time.toString() : ''
  return `${dateStr} ${timeStr}`
}

/**
 * 处理图片预览事件
 */
const handleImagePreview = (data) => {
  console.log('图片预览事件:', data)
  // AppImagePreview组件会自动处理预览，这里可以添加额外的逻辑
}

/**
 * 处理图片错误事件
 */
const handleImageError = (data) => {
  console.error('图片加载错误:', data)
  uni.showToast({
    title: '图片加载失败',
    icon: 'none'
  })
}

/**
 * 处理图片加载事件
 */
const handleImageLoad = (data) => {
  console.log('图片加载成功:', data)
}

/**
 * 获取记录状态类型
 */
const getRecordStatusType = (status) => {
  const typeMap = {
    1: 'warning',  // 待检查
    2: 'success',  // 合格
    3: 'error',    // 不合格
    4: 'info'      // 需返工
  }
  return typeMap[status] || 'info'
}

/**
 * 获取检查状态类型
 */
const getInspectionStatusType = (status) => {
  if (status.includes('合格')) return 'success'
  if (status.includes('不合格')) return 'error'
  if (status.includes('返工')) return 'warning'
  return 'info'
}

/**
 * 跳转到任务分配页面
 */
const goToTaskAssign = () => {
  uni.navigateTo({
    url: `/pages/property-work/cleaning-management/task-assign?id=${taskId.value}`
  })
}

/**
 * 跳转到任务开始页面
 */
const goToTaskStart = () => {
  uni.navigateTo({
    url: `/pages/property-work/cleaning-management/task-start?id=${taskId.value}`
  })
}

/**
 * 跳转到任务完成页面
 */
const goToTaskComplete = () => {
  console.log('跳转到任务完成页面，任务ID:', taskId.value)
  
  if (!taskId.value) {
    uni.showToast({
      title: '任务ID不能为空',
      icon: 'none'
    })
    return
  }
  
  uni.navigateTo({
    url: `/pages/property-work/cleaning-management/task-complete?id=${taskId.value}`,
    success: () => {
      console.log('跳转到任务完成页面成功，任务ID:', taskId.value)
    },
    fail: (err) => {
      console.error('跳转到任务完成页面失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.task-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .retry-btn {
    margin-top: 40rpx;
    width: 200rpx;
  }
}

.task-content {
  padding: 20rpx;
}

.info-card, .progress-card, .photos-card {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .task-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      flex: 1;
    }
    
    .card-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-left: 12rpx;
    }
    
    .photo-count {
      font-size: 24rpx;
      color: #999;
      margin-left: 16rpx;
    }
  }
  
  .card-content, .progress-content, .photos-content {
    padding: 30rpx;
  }
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .info-label {
    font-size: 26rpx;
    color: #666;
    margin-left: 12rpx;
    min-width: 120rpx;
  }
  
  .info-text {
    font-size: 26rpx;
    color: #333;
    flex: 1;
    line-height: 1.4;
    
    &.description-text {
      margin-top: 8rpx;
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
      line-height: 1.6;
    }
  }
  
  .priority-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 12rpx;
    
    .priority-text {
      font-size: 26rpx;
      color: #333;
      margin-right: 16rpx;
      min-width: 60rpx;
    }
    
    .priority-bar {
      flex: 1;
      height: 8rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;
      
      .priority-fill {
        height: 100%;
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }
  }
}

.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .progress-label {
    font-size: 26rpx;
    color: #666;
    min-width: 140rpx;
  }
  
  .progress-text {
    font-size: 26rpx;
    color: #333;
    flex: 1;
  }
}

.records-content {
  .record-item {
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      
      .record-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .record-content {
      .record-info {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          font-size: 24rpx;
          color: #666;
          min-width: 120rpx;
        }
        
        .info-text {
          font-size: 24rpx;
          color: #333;
          flex: 1;
        }
      }
    }
  }
}

.photos-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  .photo-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    overflow: hidden;
    
    .photo-image {
      width: 100%;
      height: 100%;
    }
    
    .photo-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    &:active .photo-overlay {
      opacity: 1;
    }
  }
}

.tools-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  
  .tool-tag {
    margin: 0;
  }
}

.quality-content {
  .score-display {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .score-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      min-width: 80rpx;
    }
    
    .score-bar {
      flex: 1;
      height: 12rpx;
      background: #f0f0f0;
      border-radius: 6rpx;
      overflow: hidden;
      
      .score-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff6b6b 0%, #ffa502 50%, #2ed573 100%);
        border-radius: 6rpx;
        transition: width 0.3s ease;
      }
    }
  }
}

.inspection-content {
  .inspection-item {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      min-width: 120rpx;
    }
    
    .info-text {
      font-size: 26rpx;
      color: #333;
      flex: 1;
    }
  }
}

.action-section {
  padding: 20rpx;
  
  .action-btn {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>
